<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${sectionName}"></title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!--自己写的css放他后面-->
    <!--格式话代码ctrl+alt+l-->

    <!--页面渲染之后再加载js-->
    <script src="/js/jquery-3.3.1.min.js"></script>
    <!--bootstrap依赖jq必须在jq引入后引入bootstrap.min.js-->
    <script src="/js/bootstrap.min.js"></script>
    <!--自己写的jq代码放他两后面-->
</head>
<body style="background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%) no-repeat fixed;">
<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid"
     style="background-color: #ffffff;padding-bottom: 20px;margin: 0 150px 40px 150px;border-radius: 3px;">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12" style="border-right: 1px solid #8c8c8c;">
            <div  style="width: 100%;height: 48px; margin-bottom: 20px; border-bottom: 1px solid #0f0f0f;"><h2><span
                    class="glyphicon glyphicon-piggy-bank" style="top: 5px;" aria-hidden="true"></span>&ensp;<span
                    th:text="${sectionName}"></span></h2>
            </div>
            <div th:if="${section}=='questions'">
                <div class="media" th:each="question:${paginationDTO.questions}">
                    <div class="media-left media-middle">
                        <a href="#">
                            <img style="width: 50px; height: 50px" class="img-rounded media-object"
                                 th:src="${question.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body" style="color: #999">
                        <h3 class="media-heading" style="color: #2d3436">
                            <a th:href="@{'/question/'+${question.getId()}}" th:text="${question.title}"></a>
                        </h3>
                        <span th:text="${question.commentCount}"></span>个回复 • <span
                            th:text="${question.viewCount}"></span> 次浏览 • <span
                            th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                    </div>
                </div>
                <nav aria-label="Page navigation" style="margin-top: 50px;">
                    <ul class="pagination" style="float: right">
                        <li th:if="${paginationDTO.showFirstPage}">
                            <a th:href="@{/profile/{section}/(section =${section},page=1)}" aria-label="Previous">
                                <span aria-hidden="true">首页</span>
                            </a>
                        </li>
                        <li th:if="${paginationDTO.showPrevious}">
                            <a th:href="@{/profile/{section}/(section =${section},page=${paginationDTO.page - 1})}"
                               aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <li th:each="page:${paginationDTO.pages}" th:class="${paginationDTO.page==page}?'active':''"><a
                                th:href="@{/profile/{section}/(section =${section},page=${page})}"
                                th:text="${page}"></a></li>
                        <li th:if="${paginationDTO.showNext}">
                            <a th:href="@{/profile/{section}/(section =${section},page=${paginationDTO.page + 1})}"
                               aria-label="Previous">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                        <li th:if="${paginationDTO.showEndPage}">
                            <a th:href="@{/profile/{section}/(section =${section},page=${paginationDTO.totalPage})}"
                               aria-label="Previous">
                                <span aria-hidden="true">尾页</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <!--通知-->
            <div th:if="${section}=='replies'">
                <ul class="list-group">
                    <li class="list-group-item" th:each="notificationDTO:${notificationDTOs}">
                        <p><a href="#" th:text="${notificationDTO.getCommentUserName()}"></a><span th:text="${notificationDTO.getTypeName()}"></span><a
                                th:href="@{'/question/'+${notificationDTO.getNotification().getOuterid()}}" th:text="${notificationDTO.getOuterTitle()}"></a></p>
                    </li>
                </ul>
            </div>

        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="list-group" style="margin-top: 50px">
                <a href="/profile/questions"
                   th:class="${section=='questions'}?'active list-group-item':'list-group-item'">我的问题</a>
                <a href="/profile/replies"
                   th:class="${section=='replies'}?'active list-group-item':'list-group-item'"><span
                        class="badge" th:text="${noticeSize}"></span>最新回复</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>